<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="index">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/assets/css/amazeui.css"/>
    <link rel="stylesheet" href="/assets/css/admin.css">
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <style type="text/css">
        .waaibiankuang {
            position: absolute;
            top: 0%;
            left: 0%;
            display: none;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999
        }

        .neibiankuang {
            position: absolute;
            left: 35%;
            border-radius: 8px;
            width: 30%;
            background-color: #fff;
        }

        #editUserInfo:hover {
            cursor: pointer;
        }

        .edit_name {
            width: 110px
            float: left;
            display: inline-block;
            margin-bottom: .5rem;
            margin-left: 18px;
            line-height: 38px;
        }

        .edit_input {
            float: left;
            display: block;
            width: 60%;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn {
            cursor: pointer;
            -webkit-appearance: button;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            float: right;
            user-select: none;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            margin-right: 20px;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn_close {
            margin-right: 20px;

        }

        .edit_btn_commit {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }
    </style>
</head>

<@common.header/>

<div class="am-cf admin-main">
    <@common.slide/>
    <div class=" admin-content">
       <@common.headers/>
        <div class="admin-biaogelist">
            <div class="listbiaoti am-cf">
                <ul class="am-icon-flag on"> 栏目名称</ul>
                <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="#">商品列表</a></dl>
            </div>
            <div class="fbneirong">
                <form id="addColorFormData" action="/color/addColor" class="am-form" method="post" enctype="multipart/form-data">
                <#--添加颜色-->
                    <div id="">
                        <div id="addColor_2" class="bg-model waaibiankuang">
                            <div class='content neibiankuang'>
                                <div style=" display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                                    <h4 style="margin-bottom: 0; line-height: 1.5;font-size: 1.5rem;" id="gridSystemModalLabel1">
                                        新增颜色</h4>
                                </div>


                                <input name="secondCategoryId_2_2" id="secondCategoryId_2_2" type="hidden">
                                <input name="versionId_2_2" id="versionId_2_2" type="hidden">


                                <div style="margin: 10px;height: 42px">
                                    <label id="" class="edit_name">颜色名称：</label>
                                    <input type="text" style=" height: 40px;" class="edit_input" id="color_name_2" name="color_name_2">
                                </div>

                                <div style="margin: 10px;height: 42px">
                                    <label id="" class="edit_name">三原色</label>
                                    <input type="text" style=" height: 40px;" class="edit_input" id="color_code_2" name="color_code_2">
                                </div>


                                <div style="margin: 10px;height: 42px">
                                    <label id="" class="edit_name">产品图片：</label>
                                    <input id="productImgs" style=" height: 40px;" type="file" multiple="true" name="file">
                                </div>


                                <div style="height: 20px; justify-content: space-between;padding: 1rem;border-top: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                                    <button type="submit" id="colorSubmit" class="edit_btn edit_btn_commit" data-dismiss="modal">新增
                                    </button>
                                    <button type="button" class="edit_btn edit_btn_close" id="addProductClose">关闭</button>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <div class="zuo">分类：</div>
                        <div class="you" href="" style="width: 10%;">
                            <select id="topCategory" name="">
                                <option value="-11">请选择</option>
                            </select>
                        </div>
                        <div class="zuo">商品名称：</div>
                        <div class="you" style="width: 10%;">
                            <select name="secondCategory" id="secondCategory">
                                <option value="-11">请选择</option>
                            </select>
                        </div>

                        <div id="addProductName" class="you" style="width:1%;">

                                <button id="addMember" style="margin-left: 10px;  margin-top: 9px;" type="button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus">
                                    添加
                                </button>
                        </div>


                        <div class="zuo" style="    margin-left: 62px;">选择版本：</div>
                        <div class="you" style="width: 10%;height: 40px;">
                            <select name="selectVersion" style="  width: 192px;" id="selectVersion">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div id="addVersion" class="you" style="width:1%;   ; margin-left: 75px">
                            <button id="addMember" style="margin-left: 10px;  margin-top: 9px;" type="button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus">
                                添加
                            </button>
                        </div>

                    </div>


                    <div class="am-form-group am-cf">
                        <div class="zuo">产品简单描述：</div>
                        <div class="you">
                            <textarea class="" name="prodcutDec" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <div class="zuo">库存：</div>
                        <div class="you">
                            <input class="" name="quantity" rows="2"></input>
                        </div>
                    </div>

                    <div class="am-form-group am-cf">


                        <#--<div class="zuo">选择颜色：</div>-->
                        <#--<div class="you" style="width: 10%;height: 40px;">-->
                            <#--<select name="" id="selectColor">-->
                                <#--<option value="-11">请选择</option>-->
                            <#--</select>-->
                        <#--</div>-->
                        <div id="addColor" class="you" style="width:1%;">
                            <button id="addMember" style="margin-left: 10px;  margin-top: 9px;" type="button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus">
                                添加颜色
                            </button>
                        </div>
                    </div>



                </form>
            </div>
            <div class="foods">

                <dl>
                    <a href="" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a>
                </dl>
            </div>


        </div>

    </div>



</div>

<#--添加商品-->
<div id="">
    <div id="addProduct" class="bg-model waaibiankuang">
        <div class='content neibiankuang'>
            <div style=" display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                <h4 style="margin-bottom: 0; line-height: 1.5;font-size: 1.5rem;" id="gridSystemModalLabel1">新增商品</h4>
            </div>
            <div style="margin: 10px;height: 42px">
                <label id="" class="edit_name">商品名称：</label>
                <input type="text" style=" height: 40px;" class="edit_input" id="addNewProductName" name="receiverName">
            </div>

            <div style="height: 20px; justify-content: space-between;padding: 1rem;border-top: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                <button type="button" id="addProductSubmit" class="edit_btn edit_btn_commit" data-dismiss="modal">新增
                </button>
                <button type="button" class="edit_btn edit_btn_close" id="close1">关闭</button>
            </div>
            　　
        </div>
    </div>
</div>
<#--添加版本-->
<div id="">
    <div id="addVersion_2" class="bg-model waaibiankuang">
        <div class='content neibiankuang'>
            <div style=" display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                <h4 style="margin-bottom: 0; line-height: 1.5;font-size: 1.5rem;" id="gridSystemModalLabel1">新增版本</h4>
            </div>
            <div style="margin: 10px;height: 42px">
                <label id="" class="edit_name">版本名称：</label>
                <input type="text" style=" height: 40px;" class="edit_input" id="version_name_2" name="receiverName">
            </div>

            <div style="margin: 10px;height: 42px">
                <label id="" class="edit_name">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</label>
                <input type="text" style=" height: 40px;" class="edit_input" id="version_price_2" name="receiverName">
            </div>

            <div style="height: 20px; justify-content: space-between;padding: 1rem;border-top: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                <button type="button" id="versionSubmit" class="edit_btn edit_btn_commit" data-dismiss="modal">添加
                </button>
                <button type="button" class="edit_btn edit_btn_close" id="addProductClose">关闭</button>
            </div>
            　　
        </div>
    </div>
</div>



<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/assets/js/polyfill/rem.min.js"></script>
<script src="/assets/js/polyfill/respond.min.js"></script>
<script src="/assets/js/amazeui.legacy.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/amazeui.min.js"></script>
<!--<![endif]-->
<script type="application/javascript">

    $(function () {
        // 请求一级标题数据，加载进行渲染

        $.ajax({
            url: '/category/getTopCategory',
            success: function (result) {
                // console.log(result.data);
                $.each(result.data, function (index, item) {
                    $("<option></option>").val(item.topCategoryId).append(item.topCategoryName).appendTo("#topCategory");
                });
            }
        });
        // 填充二级分类标题
        $("#topCategory").bind("change", function () {
            //获取option的value
            var topCategoryId = $(this).val()

            // 清空区县文本框内容
            $("#secondCategory").empty();
            $.ajax({
                url: '/category/getByTopCategory?topCategoryId=' + topCategoryId,
                success: function (result) {
                    // console.log(result.data)
                    $(" <option></option>").append("请选择").appendTo("#secondCategory")
                    $.each(result.data, function (index, item) {
                        $(" <option></option>").val(item.secondCategoryId).append(item.secondCategoryName).appendTo("#secondCategory")
                    });
                }
            });
        });

        // // 填充版本信息
        // $("#versionName").bind("change", function () {
        //     //获取option的value
        //     var topCategoryId = $(this).val()
        //     // 清空区县文本框内容
        //     $("#secondCategory").empty();
        //     $.ajax({
        //         url: '/category/getByTopCategory?topCategoryId=' + topCategoryId,
        //         success: function (result) {
        //             // console.log(result.data)
        //             $(" <option></option>").append("请选择").appendTo("#secondCategory")
        //             $.each(result.data, function (index, item) {
        //                 $(" <option></option>").val(item.secondCategoryId).append(item.secondCategoryName).appendTo("#secondCategory")
        //             })
        //         }
        //     })
        // })


        // 添加商品
        $("#addProductName").click(function () {
            var topCategory = $("#topCategory").val();
            if (topCategory == -11) {
                alert("请选择分类");
                return;
            }
            $("#addProduct").fadeTo(300, 1)
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
        })
        // 提交添加商品的数据
        $("#addProductSubmit").click(function () {
            // 填充数据
            var productName = $("#addNewProductName").val();
            var topCategory = $("#topCategory").val();
            if (productName.length < 1) {
                alert("请输入商品名称");
                return false;
            }
            $.ajax({
                url: '/category/addSecondCategory?productName=' + productName + '&topCategory=' + topCategory,
                success: function (result) {
                    if (result.data == 10) {
                        // 清空区县文本框内容
                        $("#secondCategory").empty();
                        $.ajax({
                            url: '/category/getByTopCategory?topCategoryId=' + topCategory,
                            success: function (result) {
                                // console.log(result.data)
                                $(" <option></option>").append("请选择").appendTo("#secondCategory")
                                $.each(result.data, function (index, item) {
                                    $(" <option></option>").val(item.secondCategoryId).append(item.secondCategoryName).appendTo("#secondCategory")
                                })
                            }
                        })
                        $("#addProduct").hide();
                        //显示窗体的滚动条
                        $("body").css({"overflow": "visible"});
                        return;
                    }
                    alert("添加失败");
                }
            })
        });
        // 选择商品之后填充版本信息
        $("#secondCategory").bind('change', function () {
            var secondCategoryId = $(this).val();
            $("#selectVersion").empty();

            $.ajax({
                url: '/version/selectBySecondCategoryId?secondCategoryId=' + secondCategoryId,
                success: function (result) {
                    if (result.status == -10) {
                        $(" <option></option>").append("请选择").appendTo("#selectVersion");
                        return false;
                    }
                    $(" <option></option>").append("请选择").appendTo("#selectVersion");
                    $.each(result.data, function (index, item) {
                        $(" <option></option>").val(item.versionId).append(item.versionName).appendTo("#selectVersion")
                    })
                }
            })

        })

        // 点击添加版本信息
        $("#addVersion").click(function () {
            if ($("#secondCategory").val() == -11) {
                // 请选择商品信
                alert("请选择商品名称");
                return false;
            }

            $("#addVersion_2").fadeTo(300, 1)
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
            // 填充数据
        });

        // 提交版本信息
        $("#versionSubmit").click(function () {
            var secondCategoryId = $("#secondCategory").val();
            var versionName = $("#version_name_2").val();
            var versionPrice = $("#version_price_2").val();
            if (versionName.length < 1 || versionPrice.length < 1) {
                alert("请输入完整内容");
                return false;
            }
            $.ajax({
                url: '/version/addVersion?secondCategoryId=' + secondCategoryId + '&versionName=' + versionName + '&versionPrice=' + versionPrice,
                success: function (result) {
                    if (result.data == 10) {
                        $("#selectVersion").empty();
                        $("#addVersion_2").hide();
                        //显示窗体的滚动条
                        $("body").css({"overflow": "visible"});
                        $.ajax({
                            url: '/version/selectBySecondCategoryId?secondCategoryId=' + secondCategoryId,
                            success: function (result) {
                                $(" <option></option>").append("请选择").appendTo("#selectVersion")
                                $.each(result.data, function (index, item) {
                                    $(" <option></option>").val(item.versionId).append(item.versionName).appendTo("#selectVersion")
                                })
                            }
                        });

                        return;
                    }
                    alert("添加失败");
                }
            })
        })


        // 选择版本之后填充颜色信息
        $("#selectVersion").bind('change', function () {

            var secondCategoryId = $("#secondCategory").val();
            var versionId = $("#selectVersion").val();
            $("#selectColor").empty();
            $.ajax({
                url: '/color/getBySecondCategoryId?secondCategoryId=' + secondCategoryId + "&versionId=" + versionId,
                success: function (result) {

                    if (result.status == -10) {
                        $(" <option></option>").append("请选择").appendTo("#selectColor")
                        return false;
                    }
                    $(" <option></option>").append("请选择").appendTo("#selectColor")
                    $.each(result.data, function (index, item) {
                        $(" <option></option>").val(item.colorId).append(item.colorName).appendTo("#selectColor")
                    })

                }
            })

        })

        // 添加颜色
        $("#addColor").click(function () {
            var versionId = $("#selectVersion").val();
            if (versionId.length < 1) {
                alert("请先选择版本")
                return false;
            }
            $("#addColor_2").fadeTo(300, 1)
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
        })


        //模态框关闭按钮点击事件
        $("#addProductClose").click(function () {
            $("#addProduct").hide();
            //显示窗体的滚动条
            $("body").css({"overflow": "visible"});
        }).hover(function () {
            $(this).css({"backgroundColor": "#8CC8C8"});
        }, function () {
            $(this).css({"backgroundColor": "#8CD4E6"});
        });


    })


</script>


</body>
</html>